<template>
  <div>
    <PageTitle title="审核"></PageTitle>
    <div class="form-wrapper">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="所属公司" prop="companyId">
          <el-select v-model="ruleForm.companyId" :disabled="true">
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.company"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌名称" prop="fication">
          <el-input :disabled="true" v-model="ruleForm.fication"></el-input>
        </el-form-item>
        <el-form-item label="开启余额支付">
          <el-switch
            :disabled="true"
            v-model="payType"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
          ></el-switch>
        </el-form-item>

        <el-form-item label="商品价格" prop="gprice">
          <el-input :disabled="true" v-model="ruleForm.gprice" type="number" placeholder="请输入商品价格">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="几个包邮" prop="num">
          <el-input :disabled="true" v-model="ruleForm.num" type="number" placeholder="请输入包邮数量起点">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="运费" prop="price">
          <el-input :disabled="true" v-model="ruleForm.price" type="number" placeholder="请输入运费">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否跳过拆盒">
          <el-switch
            :disabled="true"
            v-model="demolition"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="不跳"
            inactive-text="跳"
          ></el-switch>
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoFile">
          <div class="img">
            <div class="item" v-for="(item,index) in ruleForm.logoFile" :key="index">
              <el-image
                style="max-width: 100%; max-height: 200px"
                :src="item.url"
                :preview-src-list="[item.url]"
              ></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="套盒封面" prop="boxCover">
          <div class="img">
            <div class="item" v-for="(item,index) in ruleForm.boxCover" :key="index">
              <el-image
                style="max-width: 100%; max-height: 200px"
                :src="item.url"
                :preview-src-list="[item.url]"
              ></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="详情图" prop="fileList">
          <div class="img">
            <div class="item" v-for="(item,index) in ruleForm.fileList" :key="index">
              <el-image
                style="max-width: 100%; max-height: 200px"
                :src="item.url"
                :preview-src-list="[item.url]"
              ></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="未开盒图片" prop="unOpenFile">
          <div class="img">
            <div class="item" v-for="(item,index) in ruleForm.unOpenFile" :key="index">
              <el-image
                style="max-width: 100%; max-height: 200px"
                :src="item.url"
                :preview-src-list="[item.url]"
              ></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="盲盒顶部" prop="boxTop">
          <div class="img">
            <div class="item" v-for="(item,index) in ruleForm.boxTop" :key="index">
              <el-image
                style="max-width: 100%; max-height: 200px"
                :src="item.url"
                :preview-src-list="[item.url]"
              ></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="盲盒正面" prop="boxFace">
          <div class="img">
            <div class="item" v-for="(item,index) in ruleForm.boxFace" :key="index">
              <el-image
                style="max-width: 100%; max-height: 200px"
                :src="item.url"
                :preview-src-list="[item.url]"
              ></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitForm">审核通过</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/pageTitle/PageTitle.vue";
import Upload from "@/components/upload/Upload.vue";
import _ from "lodash";
export default {
  name: "SecondTypeDetail",
  components: {
    PageTitle,
    Upload
  },
  activated() {
    if (this.$route.params.id != "none") {
      this.ruleForm.fication = this.$route.params.fication;
      this._get();
    }
    this._getType();
  },
  deactivated() {
    this.$destroy();
  },
  data() {
    return {
      typeList: [],
      payType: false,
      demolition: false,
      loading: false,
      ruleForm: {
        oid:null,
        companyId: "",
        ficationId: "",
        fication: "",
        num: "",
        price: "",
        gprice: "",
        logoFile: [],
        boxCover: [],
        boxTop: [],
        boxFace: [],
        payTypeList: [], //type: 1是    type: 2 否
        fileList: [],
        openFile: [],
        unOpenFile: []
      }
    };
  },
  computed: {},
  watch: {
    payType() {
      this.ruleForm.coverFileList = [];
    }
  },
  methods: {
    async _getType() {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/company/list",
        method: "GET",
        params: {
          current: 1,
          size: 1000
        }
      });
      if (code === 0) {
        this.typeList = data.items;
        if (this.$route.params.id != "none") {
          this.ruleForm.companyId = this.$route.params.companyId;
        }
      }
    },
    async _get() {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/fication/details",
        method: "GET",
        params: {
          id: this.$route.params.id
        }
      });
      if (code === 0) {
        this.ruleForm.gprice = data.items.gprice;
        this.ruleForm.price = data.items.price;
        this.ruleForm.num = data.items.num;
        this.ruleForm.oid = data.items.oid;
        if (data.items.balance === "1") {
          this.payType = true;
        }
        if (data.items.demolition === "1") {
          this.demolition = true;
        }
        this.ruleForm.logoFile.push({
          id: data.items.log,
          url: data.items.url
        });
        this.ruleForm.boxCover.push({
          id: data.image[0].id,
          url: data.image[0].url
        });
        this.ruleForm.boxTop.push({
          id: data.image[1].id,
          url: data.image[1].url
        });
        this.ruleForm.boxFace.push({
          id: data.image[2].id,
          url: data.image[2].url
        });
        //   this.ruleForm.openFile.push({
        //     id: data.image[4].id,
        //     url: data.image[4].url
        //   })
        this.ruleForm.unOpenFile.push({
          id: data.image[3].id,
          url: data.image[3].url
        });
        // console.log(data.details);
        data.details.forEach(item => {
          this.ruleForm.fileList.push(item);
        });
        // console.log('aa', this.ruleForm.fileList);
      }
    },
    fileChange(data) {
      this.ruleForm[data.el] = data.arr;
    },
    //点击过审
    async submitForm() {
      console.log("点击提交");
      this.loading = true
      let data = await this.$axios({
        url:this.$api+'/v1/fication/trial',
        method:"POST",
        data:{
          oid:this.ruleForm.oid
        }
      })
      this.loading = false
      console.log('审核结果---------',data)
      if (data.data.code == 0) {
        this.$message.success(data.data.data);
        setTimeout(() => {
          this.$router.go(-1);
        }, 1500);
      }
    }
  }
};
</script>

<style>
.img {
  display: flex;
  flex-wrap: wrap;
}
.img .item {
  width: 200px;
  margin: 10px;
}
</style>
